@font-color:#65c4f1;
@bc-color: #000350;
@border-color:#032d60;
html,body{
    height: 100%;
    font-weight: "微软雅黑";
}
body{
    margin: 0;
    color: @font-color;
    background-color: @bc-color;
}
.title{
    height: 130px;
    background-image: url("../imgs/logo.png");
    background-repeat: no-repeat;
    background-size: 1700px;
    background-position: center;
}
.main-title{
    font-size: 30px;
    text-align: center;
    font-weight: bolder;
    padding-top:26px;
    background: linear-gradient(to bottom, #ffffff,@font-color);
    color: transparent;
    // 存在兼容问题，具体替代方法有待验证
    -webkit-background-clip: text;
}
.sub-title{
    text-align: center;
    line-height: 1;
    margin-top: -25px;
    >span{
        color: @font-color;
        padding: 2px 60px;
        display: inline-block;
    }
}
.content{
    text-align: center;
    position: absolute;
    top: 80px;
    bottom: 0px;
    width: 100%;
	min-height: 800px;
    .border-box{
        margin-bottom: 20px;
        box-sizing: border-box;
        border: 2px solid #032d60;
        border-image: url("../imgs/border.png") 51 38 21 132;
        border-width: 40px 40px 20px 120px;
        position: relative;
        >div{
            position: absolute;
            top: -40px;
            right: -40px;
            bottom: -20px;
            left: -120px;
            padding: 42px 10px 0px 10px;
            >.chart{
                width: 100%;
                height: 100%;
            }
            >.msg{
                display: none;
                position: absolute;
                top: 50%;
                left: 0px;
                width: 100%;
                transform: translateY(-50%);
                color: rgba(246,233,198,0.6);
            }
        }
        .tip{
            position: absolute;
            top: 10px;
            left: 0px;
            width: 100%;
		}
		.data-count{
			display: flex;
			flex-flow: row wrap;
			.sub-type{
				width: 100%/3;
			}
			.number{
				color: gold;
				font-size: 30px;
				font-weight: bold;
			}
			.text{
				color: white;
				font-size: 20px;
				font-weight: bold;
			}
		}
    }
    .data-box,.map-box{
        display: flex;
        flex-flow: column;
        height: 100%;
    }
    .data-box > div{
        width: 100%;
        height: 50%
    }
    .map-box > div{
        width: 100%;
        &:first-child{
            margin-top: 50px;
            height: 35%;
        }
        &:last-child{
            height: 65%;
        }
    }
}
@media (max-width: 992px){
    .content{
        position: static;
        height: 800px;
        .map-box > div:first-child{
            margin-top: 0px;
        }
    }
}